@import models.Tables.BlockrangeRow
@import models.Web


@(row: BlockrangeRow)(implicit session: Session)

    @config.main(row.name) {

        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

        <style>
                .bootstrap-table {
                    width: 100% !important;
                }

                .bar_a {
                    fill: #FFC100; /*#FFC100*/
                    stroke: #E7AE00; /*#E7AE00*/
                    clip-path: url(#clip);
                }

                .bar_b {
                    fill: #000000;
                    stroke: #6B6B6B;
                    clip-path: url(#clip);
                }

                path {
                    fill: grey;
                    opacity: 0.5;
                    clip-path: url(#clip);
                }

                .textA {
                    dominant-baseline: middle;
                    clip-path: url(#clip);
                    font-size: 12px;
                }

                .textB {
                    dominant-baseline: middle;
                    clip-path: url(#clip);
                    font-size: 12px;
                }

                text {
                    dominant-baseline: middle;
                }

        </style>
        <div class="body-box">
            <div class="page-box">


            @config.subTitle(row.name)


                <div class="main-body detail-info" style="position: relative">

                                @components.scrollComponents("Block info") {
                                    <table class="table table-bordered table-hover table-striped ">
                                        <tbody>
                                            <tr>
                                                <th>Block ID</th>
                                                <td>@row.name</td>
                                            </tr>
                                            <tr>
                                                <th>Organism A</th>
                                                <td><a href="/COADB/browse/genomePage/@{
                                                    row.querySpecies
                                                }" target="_blank"> @{
                                                    Web.genomeName(row.querySpecies)
                                                }</a> </td>
                                            </tr>
                                            <tr>
                                                <th>Location A</th>
                                                <td>@row.query:@row.queryStart-@row.queryEnd</td>
                                            </tr>
                                            <tr>
                                                <th>Organism B</th>
                                                <td><a href="/COADB/browse/genomePage/@{
                                                    row.refSpecies
                                                }" target="_blank"> @{
                                                    Web.genomeName(row.refSpecies)
                                                } </a></td>
                                            </tr>
                                            <tr>
                                                <th>Location B</th>
                                                <td>@row.ref:@row.refStart-@row.refEnd</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                }

                                @components.scrollComponents("Data") {
                                    <div style="width: 100%">

                                        <table id="table" class="table table-bordered" data-pagination="true"
                                        data-page-list="[10, 25, 50, 100]"
                                        data-advanced-sortable="true">
                                            <thead>
                                                <tr>
                                                    <th data-field='geneA' data-sortable='true' data-search-type="text" data-formatter="GetGene" >
                                                        Gene A</th>
                                                    <th data-field='locusA' data-sortable='true' data-search-type="text">
                                                        Locus A</th>
                                                    <th data-field='geneB' data-sortable='true' data-search-type="text" data-formatter="GetGene" >
                                                        Gene B</th>
                                                    <th data-field='locusB' data-sortable='true' data-search-type="text">
                                                        Locus B</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>

                                }

                                @components.scrollComponents("Visualization") {
                                    <div style="width: 100%;
                                        text-align: center">
                                        <svg id="svg" width="600" height="800"></svg>
                                    </div>
                                }


            </div>
            </div>
        </div>

        <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("circos/d3.v4.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("circos/display_block.js")" type="text/javascript"></script>


        <script>

                $(function () {
                    let index = MyTable.prototype.loadingIcon();

                    $.post("@routes.BlockController.getBlockInfo(row.id)", (data) => {
                        $("#table").bootstrapTable({data: data.table});
                        DisplayBlock(data.relate, data.data, "/COADB/browse/genePage/")
                        layer.close(index)
                    })


                })

                function GetGene(value, row) {
                    return `<a href="/COADB/browse/genePage/${value}" target="_blank">${value}</a>`
                }


        </script>
    }